@import url("https://fonts.googleapis.com/css?family=Lobster");

p {
    display: block;
    font-family: "Lobster";
    text-align: center;
    font-size: 20vmin;
    line-height: 40vmin;
    color: #fff;
    cursor: pointer;

    &:hover {
        color: #fff;
    }
}

.container br {
    min-width: 200px;
    width: 100%;
    height: 100vh;
}

.pink {
    filter: brightness(110%);
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #e91e63,
        0 0 35px #e91e63, 0 0 40px #e91e63, 0 0 50px #e91e63, 0 0 75px #e91e63;
    animation: pink 1.5s ease-in-out infinite alternate;
}

.orange {
    color: #ff5722;
}

.orange:hover {
    animation: orange 1.5s ease-in-out infinite alternate;
}

.yellow {
    color: #ffeb3b;
}

.yellow:hover {
    animation: yellow 1.5s ease-in-out infinite alternate;
}

@keyframes pink {
    to {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
            0 0 40px #e91e63, 0 0 70px #e91e63, 0 0 80px #e91e63,
            0 0 100px #e91e63, 0 0 150px #e91e63;
    }
}

@keyframes orange {
    to {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
            0 0 40px #ff5722, 0 0 70px #ff5722, 0 0 80px #ff5722,
            0 0 100px #ff5722, 0 0 150px #ff5722;
    }

    from {
        filter: brightness(110%);
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff,
            0 0 20px #ff5722, 0 0 35px #ff5722, 0 0 40px #ff5722,
            0 0 50px #ff5722, 0 0 75px #ff5722;
    }
}

@keyframes yellow {
    to {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
            0 0 40px #ffeb3b, 0 0 70px #ffeb3b, 0 0 80px #ffeb3b,
            0 0 100px #ffeb3b, 0 0 150px #ffeb3b;
    }

    from {
        filter: brightness(110%);
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff,
            0 0 20px #ffeb3b, 0 0 35px #ffeb3b, 0 0 40px #ffeb3b,
            0 0 50px #ffeb3b, 0 0 75px #ffeb3b;
    }
}

.panel {
    text-align: center;
    padding: 10% 0;
    background-color: transparent;
}

.panel .btn-container {
    display: inline-block;
}

.panel .btn-container input {
    height: 60px;
    border: 0;
    outline: 0;
    width: 120px;
    border-radius: 30px;
    background-color: rgb(104, 101, 101);
    color: #fff;
    font-size: 20px;
    padding: 0 20px;
    vertical-align: middle;
    transition: .2s;
}

::-webkit-input-placeholder {
    color: #fff;
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

.panel .btn-container .btn {
    display: inline-block;
    height: 60px;
    background-color: rgb(239, 77, 138);
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    width: 170px;
    border-radius: 30px;
    margin-left: -170px;
    cursor: pointer;
    transition: .2s;

}

.panel .btn-container:hover input {
    width: 400px;
    animation: inputShow .4s ease-in;
}

.panel input:focus {
    width: 400px;
    animation: inputShow .4s ease-in;
}

@keyframes inputShow {
    0% {
        width: 400px;
    }

    60% {
        width: 440px;

    }

    100% {
        width: 450px;
    }
}

@keyframes inputAction {
    0% {
        width: 400px;
    }

    60% {
        width: 450px;

    }

    100% {
        width: 400px;
    }
}

/* 搜索框样式：https://blog.csdn.net/qq_39969226/article/details/106321208 */